<template>
  <el-dialog
    v-model="dialogVisible"
    title="页面预览"
    width="90%"
    class="preview-dialog"
  >
    <div class="preview-header">
      <div class="preview-info">
        <span>预览模式</span>
        <el-tag size="small" type="success">实时预览</el-tag>
      </div>
      <div class="preview-actions">
        <el-button-group size="small">
          <el-button @click="zoomOut" :disabled="previewZoom <= 0.5">
            <el-icon><ZoomOut /></el-icon>
          </el-button>
          <el-button @click="resetZoom">{{ Math.round(previewZoom * 100) }}%</el-button>
          <el-button @click="zoomIn" :disabled="previewZoom >= 2">
            <el-icon><ZoomIn /></el-icon>
          </el-button>
        </el-button-group>
        <el-button size="small" @click="refreshPreview">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
        <el-text size="small" style="margin-left: 10px;">
          组件数量: {{ components.length }}
        </el-text>
      </div>
    </div>

    <div class="preview-content">
      <div class="preview-canvas-wrapper">
        <div class="preview-canvas" :style="previewCanvasStyle">
          <!-- 组件渲染区域 -->
          <ComponentRenderer
            v-for="component in components"
            :key="component.id"
            :component="component"
            :preview-mode="true"
          />
          
          <!-- 空状态提示 -->
          <div v-if="components.length === 0" class="empty-state">
            <el-icon class="empty-icon"><Box /></el-icon>
            <p>暂无组件可预览</p>
            <el-button type="primary" @click="$emit('update:modelValue', false)">
              去添加组件
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useEditorStore } from '@/stores/editor'
import { Refresh, ZoomIn, ZoomOut, Box } from '@element-plus/icons-vue'
import ComponentRenderer from './ComponentRenderer.vue'

const props = defineProps({
  modelValue: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue'])
const editorStore = useEditorStore()
const dialogVisible = ref(false)
const previewZoom = ref(1)

const components = computed(() => editorStore.components)
const canvasConfig = computed(() => editorStore.canvasConfig)

const previewCanvasStyle = computed(() => ({
  ...canvasConfig.value,
  position: 'relative',
  minHeight: canvasConfig.value.height || '600px',
  width: canvasConfig.value.width || '100%',
  backgroundColor: canvasConfig.value.backgroundColor || '#ffffff',
  transform: `scale(${previewZoom.value})`,
  transformOrigin: 'top left',
  transition: 'transform 0.2s ease',
  margin: '20px auto',
  overflow: 'hidden'
}))

watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal
  if (newVal) {
    // 预览对话框打开时自动刷新调试信息
    setTimeout(() => {
      refreshPreview()
    }, 100)
  }
})

watch(dialogVisible, (newVal) => {
  emit('update:modelValue', newVal)
})

const refreshPreview = () => {
  console.log('预览已刷新')
  console.log('当前组件数量:', components.value.length)
  console.log('组件数据:', components.value)
  console.log('画布配置:', canvasConfig.value)

  // 详细检查每个组件的数据结构
  components.value.forEach((component, index) => {
    console.log(`组件${index + 1}:`, {
      id: component.id,
      type: component.type,
      position: component.position,
      props: component.props,
      styles: component.styles
    })
  })
}

// 预览缩放控制
const zoomIn = () => {
  if (previewZoom.value < 2) {
    previewZoom.value = Math.min(2, previewZoom.value + 0.1)
  }
}

const zoomOut = () => {
  if (previewZoom.value > 0.5) {
    previewZoom.value = Math.max(0.5, previewZoom.value - 0.1)
  }
}

const resetZoom = () => {
  previewZoom.value = 1
}
</script>

<style lang="scss" scoped>
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;

  .preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.preview-content {
  padding: 20px;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 500px;
}

.preview-canvas-wrapper {
  overflow: auto;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.preview-canvas {
  background: white;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e4e7ed;
}

.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #909399;

  .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    color: #c0c4cc;
  }

  p {
    margin: 8px 0;
    font-size: 14px;
  }
}

/* 支持自定义样式 */
:deep(.preview-component) {
  /* 确保自定义样式能够正常应用 */
  *, *::before, *::after {
    box-sizing: border-box;
  }
}
</style>
